<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理页面-分类管理</title>
    <style>
        .el-header {
            background-color: rgba(63, 157, 254, 0.99);
            color: #333;
            line-height: 90px;
        }

        .el-aside {
            color: rgb(238, 241, 246)
        }

        .el-main {

        }
        .tree-node.tree-node-1 {
            font-size: 20px;

        }
        .el-tree-node__content{
            height: 40px;
        }
        .tree-node.tree-node-2 {
            font-size: 16px;
        }
        .custom-tree-node {
            flex: 1;
            display: flex;
            height:20px;
            align-items: center;
            justify-content: space-between;
            padding-right: 8px;
        }
        .a1 {
            display: flex;
            justify-content: center;
        !important;
            align-items: center;
        !important;
            margin-top: 25px;
        }

    </style>
</head>
<body>
<div id="app">
    <!--顶部信息栏-->
    <hr style="border-width: 3px;background-color: rgba(63,157,254,0.96);border-color: rgba(63,157,254,0.96);border-style: solid">
    <el-row>
        <el-col :span="6">
            <img src="../img/logo.png" height="100" width="250" style="text-align:left;margin-left: -20px">
        </el-col>
        <el-col :span="12">
            <span class="a1" style="color:#2e2e2f;font-size:40px;">淘书网后台管理</span>
        </el-col>
        <el-col :span="6">
            <el-button type="text" style="color: #666;position: absolute; bottom: 10px;right:10px;"
                       @click="killSession">退出登录
            </el-button>
            <span style="color: #666;font-size:15px;float: right;margin-top:20px">管理员:{{Admin.adminName}}</span>
        </el-col>
    </el-row>
    <hr style="border-width: 3px;background-color: rgba(63,157,254,0.96);border-color: rgba(63,157,254,0.96);border-style: solid">
    <el-container style=" border: 0px solid #eee">
        <!--左侧导航栏-->
        <el-aside width="250px" style="background-color: rgb(253,253,254);">
            <el-col style="width:250px">
                <el-menu
                        default-active="4"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-menu-item index="1" @click="jumpToBookManage">
                        <i class="el-icon-reading" index="1" style="font-size:20px"></i>
                        <span slot="title" style="font-size:20px">图书管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="jumpToUserManage">
                        <i class="el-icon-user" style="font-size:20px"></i>
                        <span slot="title" style="font-size:20px">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="jumpToOrdersManage">
                        <i class="el-icon-document" style="font-size:20px"></i>
                        <span slot="title" style="font-size:20px">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="jumpToCategoryManage">
                        <i class="el-icon-menu" style="font-size:20px"></i>
                        <span slot="title" style="font-size:20px">分类管理</span>
                    </el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>
                    <el-menu-item index="4"></el-menu-item>

                </el-menu>
            </el-col>
        </el-aside>
        <el-main>
            <el-button type="primary" @click="addCategory">添加分类</el-button>
            <div class="custom-tree-container">
                <div class="block">
                    <p>图书分类</p>
                    <el-tree
                            :data="data"
                            :props="defaultProps"
                            node-key="id"
                            default-expand-all
                            :expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span class="tree-node" :class="'tree-node-' + node.level">
                                <span v-if="node.level===1">{{ data.name }}</span>
                                <span v-if="node.level===2"><li>{{ data.name }}</li></span>
                            </span>
                            <span v-if="node.level===1">
                                <el-button type="text" @click="() => append(data)">添加</el-button>
                                <el-button type="text" @click="() => echo(data)">修改</el-button>
                                <el-button type="text" @click="() => remove(data)">删除</el-button>
                            </span>
                            <span v-if="node.level===2">
                                <el-button type="text" @click="() => echo(data)">修改</el-button>
                                <el-button type="text" @click="() => remove(data)">删除</el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </el-main>
        <el-dialog
                title="修改名称"
                :visible.sync="editDialogVisible"
                width="30%"
        >
            <el-form ref="editForm":model="editDialog" label-width="40px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editDialog.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="editDialog.sort"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center">
                    <el-button type="primary" @click="update('editForm')" >确 定</el-button>
                    <el-button @click="editDialogVisible = false" >取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>


<script>
    let id = 1000;
    new Vue({
        el: '#app',
        mounted() {
            this.selectAll()
        },
        methods: {
            getAdmin() {
                axios({
                    method: "get",
                    url: "/admin",
                }).then(resp => {
                    this.Admin = resp.data;
                    console.log(this.Admin);
                    if (this.Admin !== null && this.Admin !== "" && this.Admin !== undefined) {

                    } else {
                        this.Admin = {adminName: null}
                    }
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送ajax请求
                    axios.get("admin/logout").then((res) => {
                    })
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                    window.location.href = "/login_page/login.html"
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            selectAll(){
                axios.get("/category").then((res) => {
                    console.log(res)
                    this.data=res.data;
                })
            },
            addCategory() {
                axios.put("/category/big").then((res) => {
                    this.selectAll()
                })
            },
            append(data) {
                console.log(data.id)
                axios({
                        method: "put",
                        url: "/category/small/"+data.id,
                }).then((res) => {
                    this.selectAll()
                })
            },
            echo(data){
                this.editDialogVisible=true
                this.editDialog= JSON.parse(JSON.stringify(data));//深拷贝
                console.log(data)
            },
            update(data){
                this.$confirm('确认修改分类名为"'+this.editDialog.name+'"', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送ajax请求
                    axios({
                        method: "post",
                        url: "/category",
                        data: this.editDialog
                    }).then((res) => {
                            this.selectAll()
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.editDialogVisible=false
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

            },
            remove(data) {
                console.log(data)
                this.$confirm('确认删除分类"'+data.name+'"', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送ajax请求
                    axios({
                        method: "delete",
                        url: "/category/"+data.id,
                    }).then((res) => {
                            this.selectAll()
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            jumpToBookManage() {
                location.href = "bookManage.html";
            },
            jumpToUserManage() {
                location.href = "userManage.html"
            },
            jumpToOrdersManage() {
                location.href = "ordersManage.html"
            },
            jumpToCategoryManage(){
                location.href = "categoryManage.html"
            },
        },
        data() {
            return {
                editDialogVisible:false,
                editDialog:{
                    id:'',
                    name:'',
                    sort:''
                },
                defaultProps: {
                    children: 'childrenTreeNodes',
                    label: 'name',
                },
                data : [{
                    id: 1,
                    name: '一级 1',
                    childrenTreeNodes: [{
                        id: 4,
                        name: '二级 1-1',
                    }]
                }, {
                    id: 2,
                    name: '一级 2',
                    childrenTreeNodes: [{
                        id: 5,
                        name: '二级 2-1'
                    }, {
                        id: 6,
                        name: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    name: '一级 3',
                    childrenTreeNodes: [{
                        id: 7,
                        name: '二级 3-1'
                    }, {
                        id: 8,
                        name: '二级 3-2'
                    }]
                }],
                //标签栏显示在”左侧“
                tabPosition: 'left',
                //当前页码
                currentPage: 1,
                // 每页显示的条数
                pageSize: 5,
                // 总记录数
                totalCount: 100,
                //选中id
                selectId: '',
                //管理员信息
                Admin: [],

            }
        }
    })
</script>
</body>
</html>